<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 基本元数据 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="HTML元数据标签应用示例页面">
    <meta name="keywords" content="HTML, meta标签, 元数据, SEO, 网页开发">
    <meta name="author" content="网页开发者">
    
    <!-- 社交媒体优化 -->
    <meta property="og:title" content="HTML元数据标签示例">
    <meta property="og:description" content="学习HTML元数据标签的使用方法">
    <meta property="og:type" content="website">
    
    <!-- 主题颜色 -->
    <meta name="theme-color" content="#4a90e2">
    
    <!-- 搜索引擎索引控制 -->
    <meta name="robots" content="index, follow">
    
    <title>HTML元数据标签示例</title>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(135deg, #4a90e2, #63b3ed);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .content {
            padding: 30px;
        }
        
        .section {
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eaeaea;
        }
        
        h2 {
            color: #4a90e2;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .meta-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .meta-card {
            background-color: #f8fafc;
            border-radius: 8px;
            padding: 20px;
            border-left: 4px solid #4a90e2;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .meta-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .meta-name {
            font-weight: bold;
            color: #2d3748;
            margin-bottom: 8px;
        }
        
        .meta-value {
            color: #4a5568;
            font-family: monospace;
            background-color: #edf2f7;
            padding: 5px 8px;
            border-radius: 4px;
            font-size: 0.9rem;
            overflow-x: auto;
        }
        
        .meta-desc {
            margin-top: 10px;
            color: #718096;
            font-size: 0.9rem;
        }
        
        .code-block {
            background-color: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.5;
        }
        
        .tag {
            color: #63b3ed;
        }
        
        .attr {
            color: #fbb6ce;
        }
        
        .value {
            color: #68d391;
        }
        
        footer {
            text-align: center;
            padding: 20px;
            background-color: #2d3748;
            color: #e2e8f0;
            margin-top: 30px;
        }
        
        @media (max-width: 768px) {
            .meta-grid {
                grid-template-columns: 1fr;
            }
            
            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>HTML元数据标签应用示例</h1>
            <p class="subtitle">学习如何使用HTML元数据标签优化网页</p>
        </header>
        
        <div class="content">
            <div class="section">
                <h2>什么是HTML元数据标签？</h2>
                <p>HTML元数据标签是位于&lt;head&gt;部分的标签，它们不直接显示在网页上，但提供了关于网页的重要信息。这些标签对于搜索引擎优化(SEO)、社交媒体分享、浏览器行为和用户体验都至关重要。</p>
            </div>
            
            <div class="section">
                <h2>常用元数据标签示例</h2>
                <div class="meta-grid">
                    <div class="meta-card">
                        <div class="meta-name">字符编码 (charset)</div>
                        <div class="meta-value">&lt;meta charset="UTF-8"&gt;</div>
                        <div class="meta-desc">指定文档的字符编码，确保文本正确显示。</div>
                    </div>
                    
                    <div class="meta-card">
                        <div class="meta-name">视口设置 (viewport)</div>
                        <div class="meta-value">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</div>
                        <div class="meta-desc">控制视口大小和缩放，实现响应式设计。</div>
                    </div>
                    
                    <div class="meta-card">
                        <div class="meta-name">页面描述 (description)</div>
                        <div class="meta-value">&lt;meta name="description" content="HTML元数据标签应用示例页面"&gt;</div>
                        <div class="meta-desc">提供页面内容的简短描述，影响SEO和搜索结果展示。</div>
                    </div>
                    
                    <div class="meta-card">
                        <div class="meta-name">作者信息 (author)</div>
                        <div class="meta-value">&lt;meta name="author" content="网页开发者"&gt;</div>
                        <div class="meta-desc">指定网页的作者信息。</div>
                    </div>
                    
                    <div class="meta-card">
                        <div class="meta-name">主题颜色 (theme-color)</div>
                        <div class="meta-value">&lt;meta name="theme-color" content="#4a90e2"&gt;</div>
                        <div class="meta-desc">设置浏览器地址栏和工具栏的主题颜色。</div>
                    </div>
                    
                    <div class="meta-card">
                        <div class="meta-name">Open Graph协议</div>
                        <div class="meta-value">&lt;meta property="og:title" content="HTML元数据标签示例"&gt;</div>
                        <div class="meta-desc">优化社交媒体分享时的标题、描述和图片显示。</div>
                    </div>
                </div>
            </div>
            
            <div class="section">
                <h2>完整HTML头部示例代码</h2>
                <div class="code-block">
                    <span class="tag">&lt;head&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;meta</span> <span class="attr">charset=</span><span class="value">"UTF-8"</span><span class="tag">&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;meta</span> <span class="attr">name=</span><span class="value">"viewport"</span> <span class="attr">content=</span><span class="value">"width=device-width, initial-scale=1.0"</span><span class="tag">&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;meta</span> <span class="attr">name=</span><span class="value">"description"</span> <span class="attr">content=</span><span class="value">"HTML元数据标签应用示例页面"</span><span class="tag">&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;meta</span> <span class="attr">name=</span><span class="value">"keywords"</span> <span class="attr">content=</span><span class="value">"HTML, meta标签, 元数据, SEO, 网页开发"</span><span class="tag">&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;meta</span> <span class="attr">name=</span><span class="value">"author"</span> <span class="attr">content=</span><span class="value">"网页开发者"</span><span class="tag">&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;meta</span> <span class="attr">name=</span><span class="value">"theme-color"</span> <span class="attr">content=</span><span class="value">"#4a90e2"</span><span class="tag">&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;meta</span> <span class="attr">property=</span><span class="value">"og:title"</span> <span class="attr">content=</span><span class="value">"HTML元数据标签示例"</span><span class="tag">&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;meta</span> <span class="attr">property=</span><span class="value">"og:description"</span> <span class="attr">content=</span><span class="value">"学习HTML元数据标签的使用方法"</span><span class="tag">&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;title&gt;</span>HTML元数据标签示例<span class="tag">&lt;/title&gt;</span><br>
                    <span class="tag">&lt;/head&gt;</span>
                </div>
            </div>
            
            <div class="section">
                <h2>元数据标签的作用</h2>
                <ul style="padding-left: 20px;">
                    <li><strong>SEO优化</strong>：帮助搜索引擎理解页面内容，提高搜索排名</li>
                    <li><strong>社交媒体分享</strong>：控制分享到社交媒体时的显示效果</li>
                    <li><strong>浏览器行为</strong>：控制浏览器如何渲染页面</li>
                    <li><strong>用户体验</strong>：提供更好的移动端体验和浏览器集成</li>
                    <li><strong>安全性</strong>：通过CSP等标签增强页面安全性</li>
                </ul>
            </div>
        </div>
        
        <footer>
            <p>HTML元数据标签应用示例 &copy; 2023</p>
        </footer>
    </div>
</body>
</html>